<template>
	<view>
		<view :style="{ height: `${barHeight}px` } ">
		</view>
		<view>
			<v-player :vodId="vodId" :history="history"></v-player>
		</view>	
	</view>

</template>

<script type="text/ecmascript-6">
	// #ifdef H5
	import vplayer from './player-h5.vue';
	// #endif
	// #ifdef APP-PLUS
	import vplayer from './player.vue';
	// #endif

	export default {
		components: {
			'v-player': vplayer
		},
		data() {
			return {
                vodId: '',
				history: false,
				barHeight: 0
			}
		},

		onLoad(option) {
		   this.barHeight=uni.getSystemInfoSync().statusBarHeight
		   this.vodId= option.vodId;
		   if(option.history){
			   this.history = option.history	   
		   }
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">

	.content {
		width: 750rpx;
		align-items: center;
	}


	.score {
		color: #00aaff;
		font-size: 14px;
	}

	.area {
		color: #808080;
		font-size: 14px;
	}

	.xuanji {
		font-size: 16px;
	}

	.vod {
		width: 110px;
		height: 175px;
	}

	.cover {
		width: 110px;
		height: 150px;
		border-radius: 5px;
		position: relative;
	}

	.renew {
		position: relative;
		color: #FFFFFF;
		font-size: 10px;
		top: -20px;
		text-align: right;
		right: 10px;
	}

	.title {
		position: relative;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 14px;
		top: -10px;
		width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
		lines: 1;
	}

	.btn {
		line-height: 25px;
		color: #FFFFFF;
		font-size: 12px;
		min-width: 50px;
		text-align: center;
		vertical-align: middle;
		padding-left: 5px;
		padding-right: 5px;
	}

	#vs {
		width: 100% !important;
		height: 230px !important;
	}
</style>
